<template>
  <div class="page-container">
    <div class="page-header">
      <button class="back-button" @click="goToHome">
        <span class="icon-arrow-left"></span>
        返回首页
      </button>
      <h1>工单统计</h1>
      <p>查看和分析工单相关统计数据</p>
    </div>
    
    <div class="stats-filters">
      <div class="filter-group">
        <label>时间范围</label>
        <select v-model="timeRange">
          <option value="week">本周</option>
          <option value="month">本月</option>
          <option value="quarter">本季度</option>
          <option value="year">本年</option>
        </select>
      </div>
      <div class="filter-group">
        <label>工单类型</label>
        <select v-model="ticketType">
          <option value="all">全部类型</option>
          <option value="network">网络问题</option>
          <option value="hardware">硬件故障</option>
          <option value="software">软件请求</option>
        </select>
      </div>
      <div class="filter-group">
        <label>处理状态</label>
        <select v-model="status">
          <option value="all">全部状态</option>
          <option value="open">已创建</option>
          <option value="processing">处理中</option>
          <option value="resolved">已解决</option>
          <option value="closed">已关闭</option>
        </select>
      </div>
      <button class="btn-primary" @click="generateReport">生成报告</button>
    </div>
    
    <div class="stats-summary">
      <div class="summary-card">
        <div class="summary-title">总工单量</div>
        <div class="summary-value">{{ totalTickets }}</div>
        <div class="summary-change">
          <span class="change-indicator positive">↑ 12%</span> 较上期
        </div>
      </div>
      <div class="summary-card">
        <div class="summary-title">已解决工单</div>
        <div class="summary-value">{{ resolvedTickets }}</div>
        <div class="summary-change">
          <span class="change-indicator positive">↑ 8%</span> 较上期
        </div>
      </div>
      <div class="summary-card">
        <div class="summary-title">平均解决时间</div>
        <div class="summary-value">{{ avgResolveTime }}</div>
        <div class="summary-change">
          <span class="change-indicator negative">↓ 5%</span> 较上期
        </div>
      </div>
      <div class="summary-card">
        <div class="summary-title">未解决工单</div>
        <div class="summary-value">{{ unresolvedTickets }}</div>
        <div class="summary-change">
          <span class="change-indicator positive">↓ 3%</span> 较上期
        </div>
      </div>
    </div>
    
    <div class="charts-container">
      <div class="chart-card">
        <h2>工单类型分布</h2>
        <div class="chart-container" ref="typeChart" style="height: 300px;"></div>
      </div>
      <div class="chart-card">
        <h2>工单趋势</h2>
        <div class="chart-container" ref="trendChart" style="height: 300px;"></div>
      </div>
      <div class="chart-card full-width">
        <h2>工单状态流转</h2>
        <div class="chart-container" ref="statusChart" style="height: 300px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'TicketStatistics',
  data() {
    return {
      timeRange: 'month',
      ticketType: 'all',
      status: 'all',
      totalTickets: 386,
      resolvedTickets: 342,
      avgResolveTime: '4.2小时',
      unresolvedTickets: 44,
      typeChart: null,
      trendChart: null,
      statusChart: null
    };
  },
  methods: {
    goToHome() {
      this.$router.push('/home');
    },
    generateReport() {
      // 生成报告的逻辑
      console.log('生成报告:', {
        timeRange: this.timeRange,
        ticketType: this.ticketType,
        status: this.status
      });
      alert('报告已生成');
    },
    initCharts() {
      // 初始化工单类型分布图表（饼图）
      this.typeChart = echarts.init(this.$refs.typeChart);
      this.typeChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['网络问题', '硬件故障', '软件请求', '其他']
        },
        series: [
          {
            name: '工单类型',
            type: 'pie',
            radius: '60%',
            center: ['40%', '50%'],
            data: [
              { value: 135, name: '网络问题' },
              { value: 110, name: '硬件故障' },
              { value: 105, name: '软件请求' },
              { value: 36, name: '其他' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });

      // 初始化工单趋势图表（折线图）
      this.trendChart = echarts.init(this.$refs.trendChart);
      this.trendChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['创建工单', '解决工单']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '创建工单',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210],
            smooth: true,
            lineStyle: {
              width: 3
            }
          },
          {
            name: '解决工单',
            type: 'line',
            stack: '总量',
            data: [110, 120, 95, 126, 85, 210, 195],
            smooth: true,
            lineStyle: {
              width: 3
            }
          }
        ]
      });

      // 初始化工单状态流转图表（柱状图）
      this.statusChart = echarts.init(this.$refs.statusChart);
      this.statusChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['已创建', '处理中', '已解决', '已关闭']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '已创建',
            type: 'bar',
            stack: '广告',
            emphasis: {
              focus: 'series'
            },
            data: [15, 20, 18, 12, 25, 10, 8]
          },
          {
            name: '处理中',
            type: 'bar',
            stack: '广告',
            emphasis: {
              focus: 'series'
            },
            data: [10, 12, 15, 8, 16, 5, 4]
          },
          {
            name: '已解决',
            type: 'bar',
            stack: '广告',
            emphasis: {
              focus: 'series'
            },
            data: [25, 30, 28, 35, 40, 20, 15]
          },
          {
            name: '已关闭',
            type: 'bar',
            stack: '广告',
            emphasis: {
              focus: 'series'
            },
            data: [20, 22, 25, 28, 30, 15, 12]
          }
        ]
      });
    },
    resizeCharts() {
      if (this.typeChart) {
        this.typeChart.resize();
      }
      if (this.trendChart) {
        this.trendChart.resize();
      }
      if (this.statusChart) {
        this.statusChart.resize();
      }
    }
  },
  mounted() {
    this.initCharts();
    window.addEventListener('resize', this.resizeCharts);
  },
  beforeUnmount() {
    if (this.typeChart) {
      this.typeChart.dispose();
    }
    if (this.trendChart) {
      this.trendChart.dispose();
    }
    if (this.statusChart) {
      this.statusChart.dispose();
    }
    window.removeEventListener('resize', this.resizeCharts);
  }
}
</script>

<style scoped>
/* 原有样式保持不变 */
.page-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 20px;
  font-weight: 500;
}

.back-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

.stats-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
}

.filter-group label {
  margin-bottom: 8px;
  font-weight: 500;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #e1e5e8;
  border-radius: 5px;
  min-width: 150px;
}

.btn-primary {
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  height: 36px;
  align-self: flex-end;
}

.btn-primary:hover {
  background: #2980b9;
}

.stats-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.summary-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.summary-card:hover {
  transform: translateY(-5px);
}

.summary-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.summary-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.summary-change {
  font-size: 13px;
  color: #666;
}

.change-indicator {
  font-weight: 500;
}

.positive {
  color: #2ecc71;
}

.negative {
  color: #e74c3c;
}

.charts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.full-width {
  grid-column: 1 / -1;
}

.chart-card h2 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  font-size: 18px;
}

.chart-container {
  width: 100%;
}

@media (max-width: 768px) {
  .charts-container {
    grid-template-columns: 1fr;
  }
  
  .stats-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-primary {
    align-self: stretch;
  }
}
</style>